<template>
<el-dialog
  title="编辑"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <!-- 表单内容部分 -->
<el-form
 :model="ruleForm" 
:rules="rules" 
ref="ruleForm"
 label-width="100px"  class="father">
<el-form-item label="课程名称" prop="classname">
    <el-input v-model="ruleForm.classname" class="reset"></el-input>
  </el-form-item>

<el-form-item label="报名费" prop="price">
    <el-input v-model="ruleForm.price" class="reset"></el-input>
  </el-form-item>

<el-form-item label="销量" prop="sall">
    <el-input v-model="ruleForm.sall" class="reset"></el-input>
  </el-form-item>

<el-form-item label="上传人" prop="peple">
    <el-input v-model="ruleForm.peple" class="reset"></el-input>
  </el-form-item>

<el-form-item label="上传时间" prop="time">
    <el-input v-model="ruleForm.time" class="reset"></el-input>
  </el-form-item>

  </el-form>
<!--  -->

  <span slot="footer" class="dialog-footer">
    <el-button @click="closedalog">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
  </span>
</el-dialog>
</template>

<script>
import {updataFunction} from '../../../api/classApi'

export default {
  props:['row'],
  mounted(){
    // console.log(this.row);
    this.ruleForm = this.row
    this.ruleForm.id = this.row.id
  },
    data() {
      // 给数值框进行数值验证  rule 规则  value是输入框的值  callback返回值
      var validatePass = (rule, value, callback)=>{
    if (!/\d/.test(value)) {
            callback(new Error('请输入数字值'));
          }else{
              callback();
            }}


      return {
        ruleForm:{    //表单绑定的数据
          id:'',
          classname:'', //input框绑定的属性 
          price:'',
          sall:'',
          peple:'',
          time:'',

        },
 rules: {
          classname: [    //规则验证
            { required: true, message: '请输入课程名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],

          price: [    //规则验证
            { required: true, message: '请输入课程价格', trigger: 'blur' },
             { validator: validatePass, trigger: 'blur' }  //自定义验证
          ],
          sall: [    //规则验证
            { required: true, message: '请输入销售量', trigger: 'blur' },
             { validator: validatePass, trigger: 'blur' }
          ],
          peple: [    //规则验证
            { required: true, message: '请输入上传人名字', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到10个字符', trigger: 'blur' }
          ],
          time: [    //规则验证
            { required: true, message: '请输入上传时间', trigger: 'blur' },
            { min: 3, max:20, message: '格式:xxxx-xx-xx', trigger: 'blur' }
          ],
          
 },

        dialogVisible: true
      };
    },
    methods: {
     closedalog(){
     this.$emit("closedialog")
     },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

 submitForm(formName) {
        this.$refs[formName].validate((valid) => { 
          if (valid) {    //valid验证
            alert('submit!');
            // console.log(this.ruleForm);
            updataFunction(this.ruleForm).then(res=>{
              // console.log(res);
            if(res.code==200){
           this.$emit('resettable')
           
            }

            })
          } 
        });
      },



    }
  };
</script>

<style lang="less" scoped>
.reset{
width: 180px; 
} 
.father{
 padding-left: 50px;
}

</style>